<template>
  <div>
    <el-form
      :model="formData"
      inline
      class="myForm"
      ref="searchform"
    >
      <el-form-item prop="patientName">
        <el-input
          v-model="formData.patientName"
          placeholder="请输入患者名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" icon="el-icon-search" 
        style="background:rgb(107, 161, 241); color:#fff">查找</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border class="myTab">
      <el-table-column label="预约编号" prop="bookingId" align="center" width="80px"></el-table-column>3
      <el-table-column label="患者姓名" prop="patientName"  align="center"></el-table-column>
      <el-table-column label="科室" prop="departmentId"  align="center">
          <template slot-scope="scope">
            {{scope.row['departmentId'] | departmentFilter(departmentOptions)}}
        </template>
      </el-table-column>
      <el-table-column label="预约医生" prop="doctorId"  align="center">
        <template slot-scope="scope">
          {{ scope.row["doctorId"] | tableFilter(doctorOptions) }}
        </template>
      </el-table-column>
      <el-table-column label="预约时间" prop="bookingTime"  align="center"></el-table-column>
      <el-table-column label="门诊费" prop="outpatientFees"  align="center"></el-table-column>
      <el-table-column label="状态" prop="statu"  align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.statu == 1 ? 'success' : ''">
            {{ scope.row["statu"] | filterTableItem(statuOptions) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="用户id" prop="uId" v-if="false"></el-table-column>
      <el-table-column label="操作" width="200"  align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="openDialog('编辑', 'edit', scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteData(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[8, 16, 24, 32, 40]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      class="myStyle"
    >
    </el-pagination>

    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="500">
      <el-form ref="dialogForm" :model="dialogFormData" label-width="100px">
        <el-form-item label="患者姓名：" prop="patientName">
          <el-input :disabled="true" v-model="dialogFormData.patientName">{{dialogFormData.patientName}}</el-input>
        </el-form-item>
        <el-form-item label="科室：" prop="departmentId">
            {{dialogFormData.departmentId | departmentFilter(departmentOptions)}}
        </el-form-item>
        <el-form-item label="预约医生：" prop="doctorId">
          {{ dialogFormData.doctorId | tableFilter(doctorOptions)}}
        </el-form-item>
        <el-form-item label="预约时间：" prop="bookingTime">
          <div class="block">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="dialogFormData.bookingTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button @click="confirm" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import axios from "axios";

export default {
  name: "reserve",
  comName: "预约管理",
  data() {
    return {
      tableData: [],
      tableLoading: false,
      dialogVisible: false,
      dialogTitle: "创建",
      dialogType: "add",
      formData: {
        patientName: "",
      },
      dialogFormData: {
        bookingId: "",
        patientName: "",
        doctorId:'',
        departmentId: "",
        bookingTime: "",
      },
      pageInfo: {
        page: 1,
        limit: 8,
        total: 0,
      },
      statuOptions: [
        { label: "未就诊", value: 0 },
        { label: "已就诊", value: 1 },
      ],
      departmentOptions:[],
      doctorOptions:[],
    };
  },
  mounted() {
    this.search();
    this.getDepartmentList();
    this.getdoctorList();
  },
  filters: {
    filterTableItem(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.value) === Number(value);
        });
        if (index < 0) {
          return "---";
        } else {
        return options[index].label;
}
},

  tableFilter(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.doctorId) === Number(value);
      });

      if (index < 0) {
        return "---";
      } else {
        return options[index].doctorName;
      }
    },


     departmentFilter(value, options) {
      let index = options.findIndex(item => {
        return Number(item.departmentId) === Number(value) 
      })
      if (index < 0) {
        return '---'
      } else {
        return options[index].departmentName
      }
    },

  },
  methods: {
    openDialog(title, type, row) {
      this.dialogVisible = true;
      this.dialogType = type;
      this.dialogTitle = title;

      if (type === "edit") {
        this.$nextTick(() => {
          this.dialogFormData = Object.assign({}, row);
        });
      }
    },
    confirm() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          if (this.dialogType === "add") {
            this.addData();
          } else if (this.dialogType === "edit") {
            this.editData();
          }
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.$refs.dialogForm.resetFields();
      this.dialogVisible = false;
    },
    editData() {
      axios({
        url: "/api/admin/updateBooking",
        method: "post",
        data: {
          ...this.dialogFormData,
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        if (res.data.error === 0) {
          this.cancel();
          this.$notify.success({ title: "编辑成功" });

          this.search();
        } else {
          this.$notify.error({ title: "编辑失败" });
        }
      });
    },
    deleteData(row) {
      this.$confirm("此操作将删除这条信息, 是否继续?").then(() => {
        axios({
          url: "/api/admin/deleteBooking",
          method: "post",
          data: {
            bookingId: row.bookingId,
          },
          headers: {
            token: sessionStorage.getItem("Token"),
          },
        }).then((res) => {
          this.$notify.success({ title: "删除成功" });
          this.search();
        });
      });
    },
    search() {
      this.tableLoading = true;

      axios({
        url: "/api/admin/searchBooking",
        method: "get",
        params: {
          ...this.formData,
          limit: this.pageInfo.limit,
          page: this.pageInfo.page,
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.tableLoading = false;
        //this.$refs.searchform.resetFields()

        this.pageInfo.total = res.data.total;
      });
    },
    // 每页多少条切换
    handleSizeChange(value) {
      this.pageInfo.limit = value;

      this.search();
    },
    // 当前页码的切换
    handleCurrentChange(value) {
      this.pageInfo.page = value;

      this.search();
    },

     getDepartmentList () {
      axios({
        url: "/api/admin/departmentlist",
        method: "get",
        params: {
          
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then(res => {
        console.log(res)
        this.departmentOptions = res.data.list;
      });
    },

    getdoctorList() {
      axios({
        url: "/api/doctor/doctorlist",
        method: "get",
        params: {},
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        // console.log(res);
        this.doctorOptions = res.data.list;
        console.log("55", this.doctorOptions);
      });
    },

  },

     
};
</script>

<style lang="scss" scoped>
.myTab {
  width: 95%;
  text-align: center;
  margin: 0 auto;
}

.myForm{

margin-top: 30px;
margin-right: 29px;
text-align: right;
}
.myStyle {
  margin-top: 40px;
  text-align: center;
}
</style>
